<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '研学活动',
  },
}
</route>

<script lang="ts" setup>
const activeList = ref([
  {
    id: 1,
    title: '把福气“印”出来：糖糕板里的中国浪漫',
    desc: '在江南水乡油车港，岁月的长河潺潺流淌，孕育出糖糕板这一璀璨的非遗明珠。一块不起眼的木头，经过打轮廓线、细坯雕造等九道工序，摇身一变成了精美的糖糕板。',
    img: 'https://m.360buyimg.com/i/jfs/t1/315096/19/18105/59933/687cb390Fa42d9218/e4a8d15cd7e0b912.jpg',
    link: 'https://mp.weixin.qq.com/s/fSBB-XeJyQS2TmTYB0GLfw',
  },
  {
    id: 2,
    title: '在嘉兴，藏着一片会呼吸的“天鹅秘境',
    desc: '厌倦了城市的钢筋水泥？想找一处能同时拥抱自然野趣与文艺气息的地方？那就来嘉兴天鹅湖吧！',
    img: 'https://m.360buyimg.com/i/jfs/t1/300926/33/22595/214661/687cb40dF62c5df74/280fe5ca6a6baf28.jpg',
    link: 'https://mp.weixin.qq.com/s/Tc8pE-onDhku7dLriFqdFQ',
  },
  {
    id: 3,
    title: '非遗活化：未来乡村的“老手艺+新创意”',
    desc: '想要探索世界，那就去发现生活中平时不去注意的小细节吧！寻找隐藏在乡野中的惊喜，跟随村民的脚步探寻小小油车港背后隐藏的有趣研学景点，来刻制糖糕板，走进高密度养鱼，观赏c919飞机模型，采摘并了解无土栽培蓝莓的奥秘...开启一场沉浸式的研学之旅。',
    img: 'https://m.360buyimg.com/i/jfs/t1/319845/5/17219/93034/687cb44dF87caa9dc/aeb7bb52de357cca.jpg',
    link: 'https://mp.weixin.qq.com/s/wkorcwRvk626GReE3mQr3w',
  },
])

function handleClick(item) {
  // 先判断链接是否为空，优化用户体验
  if (!item.link) {
    uni.showToast({
      title: '暂无相关内容',
      icon: 'none',
      duration: 1500,
    })
    return
  }

  // 对链接进行编码后再传递
  const encodedUrl = encodeURIComponent(item.link)
  uni.navigateTo({
    url: `/pages/index/webView?url=${encodedUrl}`,
  })
}
</script>

<template>
  <view class="p-3">
    <view v-for="item in activeList" :key="item.id" class="mt-5 rounded-md bg-white text-26rpx leading-[1.6] shadow-lg" @click="handleClick(item)">
      <!-- aspectFit|aspectFill|widthFix -->
      <image class="h-420rpx w-full rounded-md" :src="item.img" mode="aspectFill" />
      <view class="relative z-5 mt-[-20rpx] rounded-md bg-white px-3 py-5">
        <view class="line-clamp-2 overflow-hidden break-words text-36rpx font-bold">
          {{ item.title }}
        </view>
        <view class="line-clamp-2 mt-8rpx overflow-hidden break-words text-30rpx">
          {{ item.desc }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
